<template>
  <div class="app-container">
    <div class="page">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        v-show="showSearch"
        label-width="68px"
        label-position="right"
      >
        <el-form-item label="作用:" prop="effect">
          <el-select
            v-model="queryParams.effect"
            style="width: 520px"
            placeholder="请选择作用"
          >
            <el-option
              v-for="item in data.purpose"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="temperature">
          <el-select
            v-model="queryParams.temperature"
            style="width: 520px"
            placeholder="请选择使用温度"
          >
            <el-option
              v-for="item in data.operatingTemperature"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="ifHighHumidity">
          <el-select
            v-model="queryParams.ifHighHumidity"
            style="width: 520px"
            placeholder="请选择是否在高湿度条件下使用  "
          >
            <el-option
              v-for="item in data.isHighHumiditySuitable"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="基材:" prop="material1">
          <el-select
            v-model="queryParams.material1"
            style="width: 520px"
            placeholder="请选择材质1"
          >
            <el-option
              v-for="item in data.material1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="material2">
          <el-select
            v-model="queryParams.material2"
            style="width: 520px"
            placeholder="请选择材质2"
          >
            <el-option
              v-for="item in data.material2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="粘胶剂:" prop="viscosity">
          <el-select
            v-model="queryParams.viscosity"
            style="width: 520px"
            placeholder="请选择粘度"
          >
            <el-option
              v-for="item in data.viscosity"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="" prop="strength">
          <el-select
            v-model="queryParams.strength"
            style="width: 520px"
            placeholder="请选择固化后强度"
          >
            <el-option
              v-for="item in data.curedStrength"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="" prop="curingTime">
          <el-select
            v-model="queryParams.curingTime"
            style="width: 520px"
            placeholder="请选择固化时间"
          >
            <el-option
              v-for="item in data.curingTime"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <div class="but">
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >查询</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  listProduct,
  getProduct,
  delProduct,
  addProduct,
  updateProduct,
  getModel,
} from "@/api/glue/product";

export default {
  name: "Product",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 胶粘产品表格数据
      productList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        effect: null,
        temperature: null,
        ifHighHumidity: null,
        material1: null,
        material2: null,
        viscosity: null,
        strength: null,
        curingTime: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        productType: [
          { required: true, message: "产品类型不能为空", trigger: "change" },
        ],
        productDescription: [
          { required: true, message: "产品简介不能为空", trigger: "blur" },
        ],
      },

      data: {
        curedStrength: [],
        curingTime: [],
        isHighHumiditySuitable: [],
        material1: [],
        material2: [],
        operatingTemperature: [],
        purpose: [],
        viscosity: [],
      },
    };
  },
  created() {
    this.getTypeList();
  },
  methods: {
    getTypeList() {
      getModel().then((response) => {
        this.data = {
          curedStrength: [],
          curingTime: [],
          isHighHumiditySuitable: [],
          material1: [],
          material2: [],
          operatingTemperature: [],
          purpose: [],
          viscosity: [],
        };
        response.data.curedStrength.forEach((element) => {
          this.data.curedStrength.push({
            label: element,
            value: element,
          });
        });

        response.data.curingTime.forEach((element) => {
          this.data.curingTime.push({
            label: element,
            value: element,
          });
        });
        response.data.isHighHumiditySuitable.forEach((element) => {
          this.data.isHighHumiditySuitable.push({
            label: element,
            value: element,
          });
        });

        response.data.material1.forEach((element) => {
          this.data.material1.push({
            label: element,
            value: element,
          });
        });

        response.data.material2.forEach((element) => {
          this.data.material2.push({
            label: element,
            value: element,
          });
        });

        response.data.operatingTemperature.forEach((element) => {
          this.data.operatingTemperature.push({
            label: element,
            value: element,
          });
        });

        response.data.purpose.forEach((element) => {
          this.data.purpose.push({
            label: element,
            value: element,
          });
        });

        response.data.viscosity.forEach((element) => {
          this.data.viscosity.push({
            label: element,
            value: element,
          });
        });
        console.log(this.data, "dataa");
      });
    },

    /** 查询胶粘产品列表 */
    handleQuery() {
      this.$router.push({
        path: "/glue/selectionList",
        query: { ...this.queryParams },
      });
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
    },
  },
};
</script>
<style>
.page {
  height: calc(100vh - 182px);
  background-image: url("../../../assets//images/5.png");
  background-size: 100% 100%;
  padding: 50px 80px;
}

.el-form-item--small.el-form-item {
  margin-bottom: 26px;
}
.but {
  width: 520px;
  display: flex;
  justify-content: right;
}
</style>
